<template>
    <div class="content">
        <audio ref="audio" controls src="../../static/assets/music/music.mp3"></audio>
        <div class="music-content">
            <ul :style="transform">
                <li :class="item.active? 'active':''" v-for="(item,index) in musicLrc"  :key="index">{{item.content}}</li>
            </ul>
        </div>
    </div>

</template>

<script>
import lrc from '@/assets/js/data'
import { computed } from 'vue'
export default {
    data(){
        return {
            musicLrc:[],
            playerIndex:0,
            currentTime:'',
            transform: computed(() => {
                return {
                    transform: `translateY(${-this.currentTime * 35}px)`
                }
            })
        }
    },
    mounted(){
        this.splitMusic();
        this.$refs.audio.addEventListener('timeupdate', this.updateCurrentTime);
    },
    watch:{
        
    },
    methods:{
    /**
     * 处理歌词
     */
        splitMusic() {
            var itm = lrc.split('\n');
            for (let index = 0; index < itm.length; index++) {
                const element = itm[index];
                var arr = element.split(']');
                var time = arr[0].replace('[', '');
                var content = arr[1];
                var obj = {
                    time: time,
                    content: content,
                    active: false
                }
                this.musicLrc.push(obj);
            }
        },
        updateCurrentTime() {
            this.playerIndex = this.$refs.audio.currentTime;
            for (let index = 0; index < this.musicLrc.length; index++) {
                if (index < this.currentTime) {
                    this.musicLrc[index].active=false;
                }
                const element = this.musicLrc[index];
                var time = element.time.split(':');
                var min = parseInt(time[0]);
                var sec = parseInt(time[1]);
                var total = min * 60 + sec;
                if (this.playerIndex < total) {
                    if (index == 0) {
                        this.currentTime = index;
                        this.musicLrc[index].active = true;
                        return
                    }
                    if (index == this.musicLrc.length - 1) {
                        this.currentTime = index - 1;
                        this.musicLrc[index].active = true;
                        return
                    }
                    this.currentTime = index-1;
                    this.musicLrc[index-1].active=true;
                    return
                } 
            }
        }
    },
    computed:{
    
    },
}
</script>

<style scoped>
.content{
    background-color: black;
    text-align: center;
    height: 600px;  
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.content audio{
    width: 530px;
    margin-bottom: 30px;
}
.content li{
    list-style-type: none;
    padding: 5px;
    font-size: 24px;
    transition: all 0.5s;
}
.content ul{
    transition: all 1s;
}
.active{
    color: aliceblue;
    transform: scale(1.3);
}
.music-content{
    height: 500px;
    overflow: hidden;
}
</style>